<template>
    <div class="container">
       <div class="nav">
         <router-link to="/my">
         <img src="../../assets/icon/common-left.png" alt="" class="back">
         </router-link>
         <p class="title">資金劃轉</p>
         <img src="../../assets/icon/file.png" alt="" class="rili">
       </div>
       <div class="box">
        <div class="start">
          <p style="margin-left: 10px">從</p>
          <select name="" id="" v-model="from_currency">
            <option value="btc">BTC账户</option>
            <option value="usdt">USDT账户</option>
            <option value="eth">ETH账户</option>
          </select>
        </div>
        <div class="end">
          <p style="margin-left: 10px">到</p>
         <p class="usd">美元帳戶</p>
        </div>
      </div>
       <div class="num">
         <p class="pleaseNum">請輸入數量</p>
         <div class="formNum">
           <input type="text" placeholder="请输入划转数量" v-model="amount" >
           <p style="margin-left: 10px" @click="allMoney">| 全部</p>
         </div>
         <div class="have">
           <p style="letter-spacing:1.5px">可用              {{myMoney}}</p>
         </div>
       </div>
      <mt-button  type="primary" style="width: 338px;height: 50px;margin:20px 0 20px 17.5px" @click="hz">提交</mt-button>
      <div class="ts">
        <img src="../../assets/icon/coin/USDT.png" alt="" class="notice">
       <span>只有將資產劃轉到美元賬戶才可進行交易。賬戶間劃轉不收取手續費。</span>
      </div>
    </div>
</template>

<script>
    import {  Button,MessageBox} from 'mint-ui';
    import {transfer} from '../../api/transfer'
    import Vue from 'vue';
    Vue.component(Button.name, Button);
    export default {
        name: "index",
        data(){
            return {
                // 自己的钱
                myMoney:0.000001,
                from_currency:'btc',
                userInfo:{},
                //划转的钱
                amount:'',
                to_currency:'dollar',


            }
        },
        methods:{

            //划转
          hz(){
             if (this.amount==''){
                 MessageBox.alert('請輸入划转數量')
             }else {
                 transfer({
                     uid:this.userInfo.uid,
                     amount:this.amount,
                     to_currency: this.to_currency,
                     from_currency: this.from_currency
                 }).then((data)=>{
                     if (data.errorCode==0){
                         MessageBox.alert(data.msg).then(action=>{
                             this.myMoney=this.myMoney-this.amount
                         })
                     }else {
                         MessageBox.alert(data.msg)
                     }
                 })
             }
            },

          allMoney(){
              this.amount=this.myMoney
          }
        },

        mounted() {
            this.userInfo=window.localStorage.getItem('userInfo');
        }

    }
</script>

<style scoped lang="scss">
  .container{
    background: white;

    width: 100%;
  }
.nav{

  color: black;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  font-size: 17px;

  .back{
  margin-left: 17.5px;
    width: 15px;
    height: 15px;
  }
  .rili{
    margin-right: 17.5px;
    width: 20px;
    height: 20px;
  }
}

.box{
  background:#409EFF;
  border-radius: 5px;
  margin: 10px auto;
  color: white;
  width: 355.2px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  p{
    font-size: 13px;
  }
  .start{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50px;
    align-items: center;
    select{
      margin-left: 30px;
      background:#409EFF;
      border-bottom: 1px solid #409EFF;
      width: 250px;
      height: 50px;
      font-size: 15px;
      color: #FFFFFF;
    }
  }
  .end{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50px;
    align-items: center;
    .usd{
      margin-left: 30px;
      font-size: 15px;
    }
  }
}

.num{
  .pleaseNum{
    width: 355.2px;
    height: 56px;
    line-height: 56px;
  }
  color: black;
  width: 355.2px;
  height: 159px;
  margin: 0 auto;
  .formNum{
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    input{

      padding: 5px 5px 5px 10px;
      border-bottom: 1px solid #f1f1f1;
      width: 268.2px;
      height: 34px;
      color: black;
    }
    input::-webkit-input-placeholder {
      font-size: 13px;
    }
    p{
      font-size: 15px;
    }
  }

}
  .ts{
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    width: 338px;
    height: 45px;
    color: black;
    font-size: 15px;
    img{
      margin-top: 3px;
      height: 14px;
      width: 14px;
    }

  }
</style>
